<template>
    <div class="picker-area" @click.stop>
        <!-- 当前外露文本 -->
        <div class="row" @click="showPickerArea">{{ areaString }}</div>

        <div class="wraper" @click.stop>
            <van-popup v-model="show" position="bottom">
                <van-area
                    :title="title"
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="onCancel"
                />
            </van-popup>
        </div>
    </div>
</template>

<script>
import { areaList } from "./areaList.js";
export default {
    props: {
        value: {
            type: Object
        },
        title: {
            type: String,
            default: "标题"
        }
    },
    data() {
        return {
            show: false,
            areaList: areaList
        };
    },

    computed: {
        areaString() {
            if (!this.value.city) {
                return "";
            }
            return `${this.value.country},${this.value.province},${this.value.city}`;
        }
    },

    methods: {
        showPickerArea() {
            this.show = true;
        },

        onConfirm(list) {
            let location = {
                country: "中国",
                province: list[0].name,
                city: list[1].name
            };

            this.show = false;
            // console.log(location, location.city, this.value.city);

            this.$emit("input", location);
            this.$emit("change", location);
        },

        onCancel() {
            this.show = false;
        }
    }
};
</script>


<style lang="less">
.picker-area {
    display: inline-block;
    .van-area {
        .van-picker__toolbar {
            height: 80px;
        }
        .van-picker__title {
            line-height: 80px;
        }
        .van-picker__title,
        .van-picker__cancel,
        .van-picker__confirm,
        .van-ellipsis {
            font-size: 32px;
        }
    }
}
</style>
